<template>
    <div>
        <!-- NewsList -->
        <div class="panel panel-default">
            <!-- Default panel contents -->
            <div class="panel-heading">News</div>
            <!-- List group -->
            <ul class="list-group">
                <li class="list-group-item" v-for="news in newsList" :key="news.id">
                    <div class="media">
                        <div class="col-sm-4">
                            <a href="#">
                                <img class="media-object img-rounded"
                                 :src="news.img" height="240px" width="100%" :alt="news.name">
                            </a>
                        </div>
                        <div class="col-sm-8">
                            <router-link :to="'/App/HomePage/NewsList/NewsDetail/' + news.name">
                                <h4 class="media-heading">{{ news.name }}</h4>
                            </router-link>
                            {{ news.content }}
                            <blockquote class="blockquote-reverse">
                                <footer>{{ news.time | dateFormat("YYYY-MM-DD hh:mm:ss")}} Edit time</footer>
                            </blockquote>

                        </div>
                    </div>
                </li>
                <!-- <li class="list-group-item">
                    <div class="media">
                        <div class="col-sm-4">
                            <a href="#">
                                <img class="media-object img-rounded"
                                 src="/src/images/car.jpg" height="240px" width="100%" alt="car">
                            </a>
                        </div>
                        <div class="col-sm-8">
                            <h4 class="media-heading">书本是人类知识的海洋</h4>
                            出生再20世纪90年代的你我，在走向21世纪中，<br>
                            对古老的民族和悠久的历史文明有多了解?<br>
                            当你看到东起嘉峪关、西至玉门关、长达万余里的雄伟长城时，<br>
                            你知道这一世界奇迹、靓丽的风景线是谁建造的吗?带着疑问和好奇，<br>
                            想要进一步了解历史时，书，来到了我的身边。他让我知道秦始皇如何吞并六国，<br>
                            统一了中国，如何建造了长城。汉武帝如何改革让西汉逐渐强大，并开辟了丝绸之路。<br>
                            更让我了解了清朝末年昏君卖国求荣，是中国陷入黑暗的书，让我了解了过去。<br>
                            我爱读书，我喜欢借助书的力量登上进步的阶梯，更喜欢在书中尽情畅游知识的海洋。<br>
                        </div>
                    </div>
                </li>
                <li class="list-group-item">
                    <div class="media">
                        <div class="col-sm-4">
                            <a href="#">
                                <img class="media-object img-rounded"
                                 src="/src/images/earth.jpg" height="240px" width="100%" alt="earth">
                            </a>
                        </div>
                        <div class="col-sm-8">
                            <h4 class="media-heading">书本是人类知识的海洋</h4>
                            出生再20世纪90年代的你我，在走向21世纪中，<br>
                            对古老的民族和悠久的历史文明有多了解?<br>
                            当你看到东起嘉峪关、西至玉门关、长达万余里的雄伟长城时，<br>
                            你知道这一世界奇迹、靓丽的风景线是谁建造的吗?带着疑问和好奇，<br>
                            想要进一步了解历史时，书，来到了我的身边。他让我知道秦始皇如何吞并六国，<br>
                            统一了中国，如何建造了长城。汉武帝如何改革让西汉逐渐强大，并开辟了丝绸之路。<br>
                            更让我了解了清朝末年昏君卖国求荣，是中国陷入黑暗的书，让我了解了过去。<br>
                            我爱读书，我喜欢借助书的力量登上进步的阶梯，更喜欢在书中尽情畅游知识的海洋。<br>
                        </div>
                    </div>
                </li>
                <li class="list-group-item">
                    <div class="media">
                        <div class="col-sm-4">
                            <a href="#">
                                <img class="media-object img-rounded"
                                 src="/src/images/hope.jpg" height="240px" width="100%" alt="hope">
                            </a>
                        </div>
                        <div class="col-sm-8">
                            <h4 class="media-heading">书本是人类知识的海洋</h4>
                            出生再20世纪90年代的你我，在走向21世纪中，<br>
                            对古老的民族和悠久的历史文明有多了解?<br>
                            当你看到东起嘉峪关、西至玉门关、长达万余里的雄伟长城时，<br>
                            你知道这一世界奇迹、靓丽的风景线是谁建造的吗?带着疑问和好奇，<br>
                            想要进一步了解历史时，书，来到了我的身边。他让我知道秦始皇如何吞并六国，<br>
                            统一了中国，如何建造了长城。汉武帝如何改革让西汉逐渐强大，并开辟了丝绸之路。<br>
                            更让我了解了清朝末年昏君卖国求荣，是中国陷入黑暗的书，让我了解了过去。<br>
                            我爱读书，我喜欢借助书的力量登上进步的阶梯，更喜欢在书中尽情畅游知识的海洋。<br>
                        </div>
                    </div>
                </li>
                <li class="list-group-item">
                    <div class="media">
                        <div class="col-sm-4">
                            <a href="#">
                                <img class="media-object img-rounded"
                                 src="/src/images/nightview.jpg" height="240px" width="100%" alt="nightview">
                            </a>
                        </div>
                        <div class="col-sm-8">
                            <h4 class="media-heading">书本是人类知识的海洋</h4>
                            出生再20世纪90年代的你我，在走向21世纪中，<br>
                            对古老的民族和悠久的历史文明有多了解?<br>
                            当你看到东起嘉峪关、西至玉门关、长达万余里的雄伟长城时，<br>
                            你知道这一世界奇迹、靓丽的风景线是谁建造的吗?带着疑问和好奇，<br>
                            想要进一步了解历史时，书，来到了我的身边。他让我知道秦始皇如何吞并六国，<br>
                            统一了中国，如何建造了长城。汉武帝如何改革让西汉逐渐强大，并开辟了丝绸之路。<br>
                            更让我了解了清朝末年昏君卖国求荣，是中国陷入黑暗的书，让我了解了过去。<br>
                            我爱读书，我喜欢借助书的力量登上进步的阶梯，更喜欢在书中尽情畅游知识的海洋。<br>
                        </div>
                    </div>
                </li>
                <li class="list-group-item">
                    <div class="media">
                        <div class="col-sm-4">
                            <a href="#">
                                <img class="media-object img-rounded"
                                 src="/src/images/eye.jpg" height="240px" width="100%" alt="eye">
                            </a>
                        </div>
                        <div class="col-sm-8">
                            <h4 class="media-heading">书本是人类知识的海洋</h4>
                            出生再20世纪90年代的你我，在走向21世纪中，<br>
                            对古老的民族和悠久的历史文明有多了解?<br>
                            当你看到东起嘉峪关、西至玉门关、长达万余里的雄伟长城时，<br>
                            你知道这一世界奇迹、靓丽的风景线是谁建造的吗?带着疑问和好奇，<br>
                            想要进一步了解历史时，书，来到了我的身边。他让我知道秦始皇如何吞并六国，<br>
                            统一了中国，如何建造了长城。汉武帝如何改革让西汉逐渐强大，并开辟了丝绸之路。<br>
                            更让我了解了清朝末年昏君卖国求荣，是中国陷入黑暗的书，让我了解了过去。<br>
                            我爱读书，我喜欢借助书的力量登上进步的阶梯，更喜欢在书中尽情畅游知识的海洋。<br>
                        </div>
                    </div>
                </li> -->
            </ul>
        </div>    
    </div>
</template>

<script>
    export default {
        data() {
            return {
                "newsList": []
            }
        },
        created() {
            this.getNewsList()
        },
        methods: {
            getNewsList() {
                this.$http.get('newsListData.json').then(result => {
                    this.newsList = result.body.newsList
                })
            }          
        }
    }
</script>

<style lang="scss" scoped>

</style>